<template>
  <div>
    <h1>HOME</h1>
    <div>
      <button @click="toNews">新闻</button>
      <button @click="toMusic">音乐</button>
      <button @click="toGame">游戏</button>
    </div>
    <div>
      <button @click="toNewsReplace">新闻Replace</button>
      <button @click="toMusicReplace">音乐Replace</button>
      <button @click="toGameReplace">游戏Replace</button>
    </div>
    <div>
      <button @click="$router.go(-2)">回退2</button>
      <button @click="$router.back()">后退1</button>
      <button @click="$router.forward()">前进1</button>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home",
  methods: {
    toNews() {
      //借助 router 的实例方法，通过编写代码来实现路由跳转,被称作为编程式路由导航
      //我们在入口文件中已经向所有的组件都注入了$route和$router两个对象
      //$route路由对象代表当前路由的信息
      //$router路由器对象提供了整个路由之间的操作的属性和方法
      // console.log(this);

      //编程式路由导航主要由以下5个方法 push(导航新的路由) replace(导航新的路由替换当前历史记录) go(前进或者回退n) back(回退1) forward(前进1)
      //push和replace的参数有两种:1.字符串参数  2. 对象类型参数
      //push方法的字符串类型参数,只需要书写完整的路由地址即可
      this.$router.push("/home/news");
    },
    toMusic() {
      //push方法的对象类型参数,对象中书写path属性代表完整地址
      this.$router.push({
        path: "/home/music",
      });
    },
    toGame() {
      //push方法的对象类型参数,对象中书写name属性代表某个路由的名字
      this.$router.push({
        name: "Game",
      });
    },
    toNewsReplace() {
      this.$router.replace("/home/news");
    },
    toMusicReplace() {
      this.$router.replace("/home/music");
    },
    toGameReplace() {
      this.$router.replace("/home/game");
    },
  },
};
</script>

<style></style>
